<script setup lang="ts">
  import { Tabs } from 'ant-design-vue';
  import { ScrollContainer } from '@/components/Container';
  import { settingList } from './detail.data';
  import BaseDetail from '@/views/system/account/detail/BaseDetail.vue';

  const props = defineProps({ userId: { type: String, default: '' } });
  const userId = props.userId;
  const TabPane = Tabs.TabPane;
  const tabs: Tabs = { BaseDetail };
  const prefixCls = 'account-setting';
  const tabBarStyle = {
    width: '220px',
  };
</script>

<template>
  <ScrollContainer>
    <div ref="wrapperRef" :class="prefixCls">
      <Tabs tab-position="left" :tabBarStyle="tabBarStyle">
        <template v-for="item in settingList" :key="item.key">
          <TabPane :tab="item.name">
            <component :is="tabs[item.component]" :userId="userId" />
          </TabPane>
        </template>
      </Tabs>
    </div>
  </ScrollContainer>
</template>

<style scoped lang="less">
  .account-setting {
    margin: 12px;
    background-color: @component-background;

    .base-title {
      padding-left: 0;
    }

    .ant-tabs-tab-active {
      background-color: @item-active-bg;
    }
  }
</style>
